<template>
  <div class="page-wrapper">
    <div
            class="mega-menu-container"
            @mouseleave="handleMouseLeave"
    >
      <!-- 左侧菜单 -->
      <div class="left-menu-column">
        <t-menu theme="light">
          <t-menu-item
                  v-for="category in leftCategories"
                  :key="category.value"
                  :value="category.value"
                  @mouseenter="showMegaMenu(category.value)"
          >
            <template #icon>
              <t-icon :name="category.icon" />
            </template>
            {{ category.label }}
          </t-menu-item>
        </t-menu>
      </div>

      <!-- 右侧悬浮内容 -->
      <transition name="fade-slide">
        <div
                v-if="hoverCategory && currentMenuData"
                class="main-content-column"
                @mouseenter="keepMegaMenu"
                @mouseleave="hideMegaMenu"
        >
          <t-row justify="space-between" align="middle" class="content-header">
            <t-col>
              <t-tabs v-model="activeTab" :list="currentMenuData.tabs" />
            </t-col>
            <t-col>
              <div class="brand-logos">
                <a
                        v-for="brand in currentMenuData.brands"
                        :key="brand.alt"
                        :href="brand.link"
                        target="_blank"
                >
                  <img :src="brand.src" :alt="brand.alt" />
                </a>
              </div>
            </t-col>
          </t-row>

          <t-row :gutter="[24, 16]">
            <t-col :span="9">
              <div class="subcategory-wrapper">
                <div
                        v-for="subCat in currentMenuData.subCategories"
                        :key="subCat.title"
                        class="subcategory-item"
                >
                  <t-row :gutter="16">
                    <t-col :span="2" class="subcategory-title">
                      {{ subCat.title }} >
                    </t-col>
                    <t-col :span="10" class="subcategory-links">
                      <t-link
                              v-for="link in subCat.links"
                              :key="link"
                              href="#"
                              theme="default"
                              hover="color"
                      >
                        {{ link }}
                      </t-link>
                    </t-col>
                  </t-row>
                </div>
              </div>
            </t-col>

            <t-col :span="3">
              <a :href="currentMenuData.ad.link" target="_blank">
                <img :src="currentMenuData.ad.src" class="ad-banner" alt="Ad Banner" />
              </a>
            </t-col>
          </t-row>
        </div>
      </transition>
    </div>

    <!-- 背景遮罩 -->
    <transition name="fade">
      <div
              v-if="hoverCategory"
              class="menu-overlay"
              @click="hideMegaMenu"
      ></div>
    </transition>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'

  // 模拟菜单数据
  const leftCategories = ref([
    { value: 'appliances', label: '家用电器', icon: 'app' },
    { value: 'phone', label: '手机/运营商/数码', icon: 'mobile' },
    { value: 'computer', label: '电脑/办公/文具', icon: 'laptop' },
    { value: 'furniture', label: '家居/家具/家装/厨具', icon: 'home' },
    { value: 'clothing', label: '男装/女装/童装/内衣', icon: 'user' },
    { value: 'beauty', label: '美妆/个护清洁/宠物', icon: 'precise-monitor' },
    { value: 'beauty', label: '美妆/个护清洁/宠物', icon: 'precise-monitor' },
  ])

  const hoverCategory = ref(null)
  const activeTab = ref('channel')

  let hideTimer = null
  const showMegaMenu = (value) => {
    clearTimeout(hideTimer)
    hoverCategory.value = value
  }
  const keepMegaMenu = () => clearTimeout(hideTimer)
  const hideMegaMenu = () => {
    hideTimer = setTimeout(() => {
      hoverCategory.value = null
    }, 150)
  }
  const handleMouseLeave = () => hideMegaMenu()

  // 模拟右侧数据
  const megaMenuData = {
    phone: {
      tabs: [
        { label: '手机频道', value: 'channel' },
        { label: '网上营业厅', value: 'hall' },
        { label: '配件频道', value: 'parts' },
        { label: '企业采购', value: 'corp' },
      ],
      brands: [
        { src: 'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/246621/40/29560/154443/68da50beF9fcd522c/474f66afe18a092f.jpg.avif', alt: 'Apple', link: '#' },
        { src: 'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/246621/40/29560/154443/68da50beF9fcd522c/474f66afe18a092f.jpg.avif', alt: 'Sony', link: '#' },
        { src: 'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/246621/40/29560/154443/68da50beF9fcd522c/474f66afe18a092f.jpg.avif', alt: 'Xiaomi', link: '#' },
      ],
      ad: { src: 'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/246621/40/29560/154443/68da50beF9fcd522c/474f66afe18a092f.jpg.avif', link: '#' },
      subCategories: [
        { title: '手机通讯', links: ['游戏手机', '拍照手机', 'AI手机', '折叠屏'] },
        { title: '运营商', links: ['中国移动', '中国电信', '中国联通'] },
        { title: '手机配件', links: ['手机壳', '贴膜', '充电器', '耳机'] },
      ],
    },
    computer: {
      tabs: [
        { label: '电脑频道', value: '1' },
        { label: '外设精选', value: '2' },
        { label: '办公用品', value: '3' },
      ],
      brands: [
        { src: 'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/246621/40/29560/154443/68da50beF9fcd522c/474f66afe18a092f.jpg.avif', alt: 'Dell', link: '#' },
        { src: 'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/246621/40/29560/154443/68da50beF9fcd522c/474f66afe18a092f.jpg.avif', alt: 'Lenovo', link: '#' },
      ],
      ad: { src: 'https://img11.360buyimg.com/jdcms/s240x240_jfs/t1/246621/40/29560/154443/68da50beF9fcd522c/474f66afe18a092f.jpg.avif', link: '#' },
      subCategories: [
        { title: '电脑整机', links: ['笔记本', '台式机', '平板'] },
        { title: '配件', links: ['显卡', '主板', '硬盘', '内存'] },
      ],
    },
  }

  const currentMenuData = computed(() => megaMenuData[hoverCategory.value])
</script>

<style scoped>
  .page-wrapper {
    position: relative;
    display: flex;
    height:100%;
  }

  .mega-menu-container {
    position: relative;
    display: flex;
    background: #fff;
    z-index: 20;
    width:99%
  }

  /* 左侧菜单 */
  .left-menu-column {
    width: 100%;
    flex-shrink: 0;
    z-index: 22;
    border-right: 1px solid #eee;
  }

  /* 悬浮内容面板 */
  .main-content-column {
    position: absolute;
    top: 0;
    left: 265px;
    width: 1000px;
    min-height: 500px;
    background: #fff;
    border-left: 1px solid #f0f0f0;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1);
    padding: 16px 24px 24px 24px;
    z-index: 30;
    border-radius: 0 8px 8px 0;
  }

  /* 动画 */
  .fade-slide-enter-active,
  .fade-slide-leave-active {
    transition: all 0.2s ease;
  }
  .fade-slide-enter-from,
  .fade-slide-leave-to {
    opacity: 0;
    transform: translateX(-10px);
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.2s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  /* 半透明遮罩层 */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 10;
  }

  /* 内容区样式 */
  .content-header {
    padding-bottom: 8px;
  }
  .brand-logos {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .brand-logos img {
    height: 30px;
    filter: grayscale(70%);
    transition: filter 0.2s;
  }
  .brand-logos img:hover {
    filter: grayscale(0%);
  }

  /* 子分类 */
  .subcategory-title {
    font-weight: 600;
    font-size: 13px;
    color: #333;
    text-align: right;
    padding-right: 12px;
  }
  .subcategory-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    border-left: 1px solid #eee;
    padding-left: 16px;
  }

  /* 广告图 */
  .ad-banner {
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
  }

  /* 菜单 hover */
  :deep(.t-menu__item:hover) {
    background-color: #f8f8f8;
    color: #c81623;
  }
  :deep(.t-menu__item:hover .t-icon) {
    color: #c81623;
  }
</style>
